import * as React from 'react';
import { connect } from 'react-redux';
import { get } from 'lodash';
import { Form, Checkbox, Button, Icon, Card, message } from 'antd';

import CustomModal from 'components/common/CustomModal';
import LoadableComponent from 'components/common/LoadableComponent';
const LoadableDragger = LoadableComponent(() => import('components/common/Dragger'));
const LoadableMedia = LoadableComponent(() => import('components/common/Media'));

interface EditImageAnswerProps {
  dispatch: (action: any) => any;
  onOk: (data: any) => any;
  onCancel: () => any;
  editSentence: any;
  relateImages: any[];
}

interface EditImageAnswerState {
  answerImage: any;
  answerAudio: any;
  relatedImageId: number;
}
class EditImageAnswer extends React.Component<EditImageAnswerProps, EditImageAnswerState> {
  static defaultProps: EditImageAnswerProps = {
    dispatch: () => {},
    onOk: () => {},
    onCancel: () => {},
    editSentence: null,
    relateImages: [],
  };
  constructor(props: EditImageAnswerProps) {
    super(props);

    const answerImage = get(props.editSentence, 'image', null);
    const answerAudio = get(props.editSentence, 'audio', null);
    const relatedImageId = get(props.editSentence, 'relatedImageId', 0);

    this.state = {
      answerImage,
      answerAudio,
      relatedImageId,
    };
  }

  // 关联图片
  handleSubmit = (): any => {
    const { relatedImageId, answerImage, answerAudio } = this.state;
    const { onOk } = this.props;

    if (!answerImage) {
      return message.error('请选择图片答案');
    }
    if (!answerAudio) {
      return message.error('请选择答案音频');
    }
    if (!relatedImageId) {
      return message.error('请关联答案图片');
    }

    onOk({ answerImage, answerAudio, relatedImageId });
  };

  renderFooterActions = () => {
    const { onCancel } = this.props;
    const { relatedImageId, answerImage } = this.state;

    let disabled = !answerImage || !relatedImageId;

    return (
      <div style={{ margin: 24 }}>
        <Button
          key="back"
          type="ghost"
          size="large"
          onClick={() => {
            onCancel();
          }}>
          取消
        </Button>
        <Button
          key="submit"
          type="primary"
          size="large"
          loading={false}
          disabled={disabled}
          onClick={this.handleSubmit}>
          保存
        </Button>
      </div>
    );
  };

  // 添加图片答案
  handleImageUploadDone = (response: any) => {
    this.setState({
      answerImage: response.files[0],
    });
  };
  // 添加答案音频
  handleAudioUploadDone = (response: any) => {
    this.setState({
      answerAudio: response.files[0],
    });
  };

  handleRemoveMedia = () => {
    this.setState({
      answerImage: null,
    });
  };

  renderAnswer() {
    const { answerAudio, answerImage } = this.state;
    return (
      <Form layout="inline">
        <Form.Item label="图片" style={{ verticalAlign: 'middle' }}>
          {answerImage ? (
            <div style={{ position: 'relative' }}>
              <LoadableMedia
                attachment={answerImage}
                onDestroy={this.handleRemoveMedia}
                imageStyle={{ width: 100, height: 100 }}
              />
            </div>
          ) : (
            <LoadableDragger
              key="image"
              accept="image"
              selectMax={1}
              onDone={(response: any) => {
                this.setState({
                  answerImage: response.files[0],
                });
              }}>
              <Button type="primary">
                <Icon type="picture" />
              </Button>
            </LoadableDragger>
          )}
        </Form.Item>
        <Form.Item label="音频" style={{ verticalAlign: 'middle' }}>
          {answerAudio ? (
            <div style={{ position: 'relative' }}>
              <LoadableMedia
                attachment={answerAudio}
                onDestroy={() => {
                  this.setState({
                    answerAudio: null,
                  });
                }}
              />
            </div>
          ) : (
            <LoadableDragger
              key="audio"
              accept="audio"
              selectMax={1}
              onDone={(response: any) => {
                this.setState({
                  answerAudio: response.files[0],
                });
              }}>
              <Button type="primary">
                <Icon type="notification" />
              </Button>
            </LoadableDragger>
          )}
        </Form.Item>
      </Form>
    );
  }

  onSelectImageChange(image: any, e: any) {
    let relatedImageId = 0;
    if (e.target.checked) {
      relatedImageId = image.id;
    }
    this.setState({
      relatedImageId,
    });
  }

  renderImages() {
    const { relateImages } = this.props;
    const { relatedImageId } = this.state;

    return (
      <Card
        key="image"
        title="关联图片"
        bordered={false}
        style={{ marginTop: 24, borderTop: '1px solid #efefef' }}>
        {relateImages &&
          relateImages.map((item: any) => {
            return (
              <div
                key={item.id}
                style={{
                  background: '#fff',
                  marginBottom: 12,
                  marginRight: 12,
                  display: 'inline-block',
                  position: 'relative',
                  border: '1px solid #efefef',
                }}>
                <img src={item.url} width="100" height="100" />
                <Checkbox
                  style={{ position: 'absolute', top: -5, right: 0 }}
                  checked={relatedImageId === item.id}
                  onChange={this.onSelectImageChange.bind(this, item)}
                />
              </div>
            );
          })}
      </Card>
    );
  }

  render() {
    return (
      <CustomModal title={false} width={800} footer={this.renderFooterActions()}>
        <Card key="answer" title="选择图片答案和音频">
          {this.renderAnswer()}
        </Card>
        {this.renderImages()}
      </CustomModal>
    );
  }
}

interface OwnProps {
  editSentence: any;
  onOk: (data: any) => any;
  onCancel: () => any;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { editSentence, onOk, onCancel } = ownProps;
  return {
    onOk,
    onCancel,
    editSentence,
  };
}

export default connect(mapStateToProps)(EditImageAnswer);
